<template>
  <div ref="chartContainer" style="width: 100rem; height: 50rem"></div>
  <el-table :data="indexShowList" style="width: 100%" show-overflow-tooltip>
    <el-table-column label="变量名称" align="center">
      <template #default="scope"> {{ scope.row.deviceName }}-{{ scope.row.statusName }} </template>
    </el-table-column>
    <el-table-column label="变量值" align="center">
      <template #default="scope">
        {{ scope.row.statusval ? scope.row.statusval : 'NAN' }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import * as echarts from 'echarts'
import EchartsConfig from '../../MyJson/echarts.json'
import { ref, onMounted } from 'vue'

export default {
  name: 'EchartsNav',
  setup() {
    const growthList = ref()
    const chartContainer = ref(null)
    const indexShowList = ref([])

    onMounted(() => {
      const myChart = echarts.init(chartContainer.value)
      myChart.setOption(EchartsConfig)
    })

    const getList = () => {
      let list = []
      const dds = window.api.listIndexPropertyToJsonArr()
      const tagList = JSON.parse(dds)
      tagList.forEach((item) => {
        if (item.deviceId === '1234567890') {
          list.push(item)
        }
      })

      indexShowList.value = list
    }
    return {
      chartContainer,
      indexShowList,
      getList
    }
  }
}
</script>

<style scoped>
/* 添加你需要的样式 */
</style>
